<template>
	<view class="content">
		<!-- #ifndef H5 -->
		<u-navbar :is-back="false" :border-bottom="false" :background="{background: 'rgba(0,0,0,0)' }"></u-navbar>
		<!-- #endif -->
		<view class="title-display-area">
			<text>朋</text>
			<text>友</text>
			<text>圈</text>
			<text>认</text>
			<text>证</text>
			<text>申</text>
			<text>请</text>
		</view>
		<view class="hint">
			合作共赢 共享市场
		</view>
		<!-- <navigator class="application-record" hover-class="none" url="/pages/merchant/apply_record">
				申请记录
		</navigator> -->
		<view class="merchant-application-form bg-white" v-if="status == 1">
			<view style="font-size: 24rpx;line-height: 24rpx;color:rgb(192, 196, 204);text-align: center;">因监管要求，发布信息必须实名认证，请正确填写</view>
			<u-form>
				<u-form-item>
					<view style="display: inline-block;position: relative;left: 50%;transform: translateX(-50%);">
						<u-radio-group v-model="form.user_type">
							<u-radio name="1" active-color="#1db0fc" style="margin-right: 50rpx;">
								企业
							</u-radio>
							<u-radio name="2" active-color="#1db0fc">
								个人
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item prop="shopName" :left-icon-style="{width:'30rpx',height:'30rpx'}" left-icon="/static/images/qiye-icon.png" v-if="form.user_type == 1">
					<u-input :border="false" placeholder="请输入商户名称" :error-message="false" v-model="form.shopName" type="text"></u-input>
				</u-form-item>
				<u-form-item prop="name" :left-icon-style="{width:'30rpx',height:'30rpx'}" left-icon="/static/images/user-icon.png">
					<u-input :border="false" placeholder="请输入姓名" v-model="form.name" type="text"></u-input>
				</u-form-item>
				<u-form-item prop="identity_card_number" :left-icon-style="{width:'30rpx',height:'30rpx'}" left-icon="/static/images/user-icon.png" v-if="form.user_type == 2">
					<u-input :border="false" placeholder="请输入身份号" v-model="form.identity_card_number" type="text"></u-input>
				</u-form-item>
				<u-form-item prop="phone" :left-icon-style="{width:'30rpx',height:'30rpx'}" left-icon="/static/images/phone-icon.png">
					<u-input :border="false" placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item prop="code" :left-icon-style="{width:'30rpx',height:'30rpx'}" left-icon="/static/images/code-icon.png">
					<u-input :border="false" placeholder="请输入验证码" v-model="form.code" type="number"></u-input>
					<view  slot="right" class="sms-btn primary sm row-center br60" @click="$sendSms">
						<view v-show="canSendSms">获取验证码</view>
						<u-count-down ref="countDown" :show-days="false" :timestamp="time" :showColon="false" separator="zh" color="#1db0fc"
						 separator-color="#1db0fc" :show-hours="false" :show-minutes="false" :autoplay="false" v-show="!canSendSms" @end="countDownFinish()" />
					</view>
					<!-- <u-button shape="square" type="success" class="send-code-button" size="mini" @click="getCode">{{codeTips}}</u-button> -->
				</u-form-item>
				<u-form-item prop="site" v-if="form.user_type == 1" :left-icon-style="{width:'30rpx',height:'30rpx'}" left-icon="/static/images/site-icon.png">
					<view class="site-display"  @tap="showMap" v-html="form.site"></view>
				</u-form-item>
				<u-form-item :left-icon-style="{width:'30rpx',height:'30rpx'}" left-icon="/static/images/remark-icon.png">
					<u-input :border="false" class="user_remark" placeholder="备注" v-model="form.user_remark" type="text"></u-input>
				</u-form-item>
				<u-form-item :border-bottom="false"  v-if="form.user_type == 1">
					<view class="flex-column">
						<view class="item-title">请上传门店LOGO</view>
						<view class="item-desc">(照片格式支持JPG、PNG、JPEG)</view>
						<u-upload ref="logo_data" :action="action" :file-list="form.logo_data" :max-count="1" :multiple="false" width="160" height="160" class="upload-button-display-site"></u-upload>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false"  v-if="form.user_type == 1">
					<view class="flex-column">
						<view class="item-title">请上传营业执照及行业相关资质证明照片</view>
						<view class="item-desc">(照片格式支持JPG、PNG、JPEG)</view>
						<u-upload ref="image_data" :action="action" :file-list="form.images_data"  :max-count="3" width="160" height="160" class="upload-button-display-site"></u-upload>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" v-if="form.user_type == 1">
					<view class="flex-column">
						<view class="item-title">请上传法人身份证正反面照片</view>
						<view class="item-desc">(照片格式支持JPG、PNG、JPEG)</view>
						<view style="display: flex;">
							<u-upload ref="identity_card_front" :action="action" :file-list="form.identity_card_front_data" :max-count="1" :multiple="false" width="160" height="160" class="upload-button-display-site" upload-text="正面照片"></u-upload>
							<u-upload ref="identity_card_back" :action="action" :file-list="form.identity_card_back_data" :max-count="1" :multiple="false" width="160" height="160" class="upload-button-display-site" upload-text="国徽面照片"></u-upload>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" >
					<u-radio-group size="24" v-model="form.agreement">
						<u-radio label-size="24" shape="circle" name="true">已阅读并同意<text style="font-size: 24rpx;color: #1db0fc ;">《入驻协议》</text></u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
			<u-button plain  shape="circle" @click="submitData">提交申请</u-button>
		</view>
		<view class="merchant-application-form bg-white" style="padding: 10vh 0;" v-if="status == 2">
			<image src="/static/images/recharge_success.png" style="width: 200rpx;height: 140rpx;margin: 0 auto;display: block;"></image>
			<text style="text-align: center;display: block;font-size: 20px;padding-top: 3vh;font-weight: bold;">提交成功</text>
		</view>
		<view class="merchant-application-form bg-white" style="padding: 10vh 0;" v-if="status == 0">
			<image src="/static/images/icon_cashOut_wait.png" style="width: 200rpx;height: 200rpx;margin: 0 auto;display: block;"></image>
			<text style="text-align: center;display: block;font-size: 20px;padding-top: 3vh;font-weight: bold;">审核中</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	import {
		sendSms
	} from '@/api/app';
	import {
		certificationStatusInquiry,
		certificationApply
	} from '@/api/user';
	export default {
		data() {
			return {
				action:'https://www.leyuanyinyong.cn/api/file/formimage',
				form: {
					user_type:'1',
					site :'请选择位置',
					image_data:[]
				},
				logo_data:[],
				images_data:[],
				identity_card_front_data:[],
				identity_card_back_data:[],
				time:60,
				canSendSms: true,
				status:-1
			};
		},
		created() {
			var _this = this;
			certificationStatusInquiry().then(res => {
				if (res.code == 1) {
					if(res.data.certification_status == 'fail'){
						_this.status = res.data.status;
					}
				}
			})
		},
		methods: {
			// 发送验证码
			$sendSms() {
				if (this.canSendSms == false) {
					return;
				}
				if (!this.form.phone) {
					this.$toast({
						title: '请填写手机号信息～'
					})
					return;
				}
			
				sendSms({
					mobile: this.form.phone,
					key: 'SHZXS'
				}).then(res => {
					if (res.code == 1) {
						this.canSendSms = false;
						this.$refs.countDown.start();
						this.$toast({
							title: res.msg
						});
					}
				})
			},
			showMap(){
				var _this = this;
				uni.chooseLocation({
				    success: function (res) {
						_this.form.site = res.address + res.name;
						_this.form.latitude = res.latitude;
						_this.form.longitude = res.longitude;
				    }
				});
			},
			submitData() {
				var _this = this;
				if(_this.form.user_type == 1 &&  (_this.form.shopName == undefined || _this.form.shopName.length <= 0)){
					_this.$refs.uToast.show({title: '请输入企业名称'});
					return false;
				}
				if(_this.form.name == undefined || _this.form.name.length <= 0){
					_this.$refs.uToast.show({title: '请输入姓名'});
					return false;
				}
				if(_this.form.user_type == 2 &&  (_this.form.identity_card_number == undefined || _this.form.identity_card_number.length <= 0)){
					_this.$refs.uToast.show({title: '请输入身份证号码'});
					return false;
				}
				
				if(_this.form.user_type == 2 &&  _this.form.identity_card_number.length != 18){
					_this.$refs.uToast.show({title: '请检查身份证号码'});
					return false;
				}
				if(_this.form.phone == undefined || _this.form.phone.length <= 0){
					_this.$refs.uToast.show({title: '请输入手机号'})
					return false;
				}
				if(_this.form.phone.length != 11){
					_this.$refs.uToast.show({title: '请检查手机号'})
					return false;
				}
				if(_this.form.code == undefined || _this.form.code.length <= 0){
					_this.$refs.uToast.show({title: '请输入验证码'})
					return false;
				}
				if(_this.form.code.length != 4){
					_this.$refs.uToast.show({title: '请检查验证码'})
					return false;
				}
				
				if(_this.form.user_type == 1){
					if(_this.form.site == undefined || _this.form.site.length <= 0){
						_this.$refs.uToast.show({title: '请选择地址'})
						return false;
					}
					if(_this.$refs.logo_data.lists[0].response.data.url != undefined){
						_this.form.logo = _this.$refs.logo_data.lists[0].response.data.url
					}
					if(_this.form.logo == undefined || _this.form.logo.length <= 0){
						_this.$refs.uToast.show({title: '请上传LOGO'})
						return false;
					}
					_this.form.image_data = [];
					for(var key in _this.$refs.image_data.lists){
						if(_this.$refs.image_data.lists[key].response.data.url != undefined){
							_this.form.image_data.push({url:_this.$refs.image_data.lists[key].response.data.url})
						}
					}
					if(_this.form.image_data == undefined || _this.form.image_data.length <= 0){
						_this.$refs.uToast.show({title: '请上传资质'})
						return false;
					}
					if(_this.$refs.identity_card_front.lists[0].response.data.url != undefined){
						_this.form.identity_card_front = _this.$refs.identity_card_front.lists[0].response.data.url
					}
					if(_this.form.identity_card_front == undefined || _this.form.identity_card_front.length <= 0){
						_this.$refs.uToast.show({title: '请上传身份证正面照片'})
						return false;
					}
					if(_this.$refs.identity_card_back.lists[0].response.data.url != undefined){
						_this.form.identity_card_back = _this.$refs.identity_card_back.lists[0].response.data.url
					}
					if(_this.form.identity_card_back == undefined || _this.form.identity_card_back.length <= 0){
						_this.$refs.uToast.show({title: '请上传身份证国徽面照片'})
						return false;
					}
				}
				
				if(_this.form.agreement == undefined || !_this.form.agreement){
					_this.$refs.uToast.show({title: '请阅读入驻协议'})
					return false;
				}
				certificationApply(_this.form).then(res => {
					if (res.code == 1) {
						_this.status = 2;
					}else{
						_this.$toast(res.msg)
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	.content {
		background: linear-gradient(180deg, #1db0fc 0, #f6f6f6);
		background-repeat: no-repeat;
		background-size: 100% 50vh;
		padding-bottom: 7vh;
	}

	.title-display-area {
		text-align: center;
		text {
			line-height: 80px;
			font-size: 40px;
			font-weight: bold;
			background-image: linear-gradient(to right, #fff, #fff);
			padding-left: 2px;
			margin-top: 10px;
			-webkit-background-clip: text;
			color: transparent;
		}
	}

	.hint {
		display: inline-block;
		font-size: 14px;
		padding: 5px 10px;
		border-radius: 50px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		background-color: #ff8e3c;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
	}

	.application-record {
		position: absolute;
		display: flex;
		align-items: center;
		top: 120px;
		right: 0;
		color: #fff;
		font-size: 11px;
		background-color: rgba(0, 0, 0, .3);
		padding: 4px 9px;
		border-radius: 20px 0 0 20px;
	}

	.merchant-application-form {
		width: 90%;
		margin: 7vh auto;
		border-radius: 20rpx;
		padding: 40rpx 40rpx;
		.send-code-button{
			color: #1DB0FC;
			border: 1px solid #1DB0FC;
			background-color: #FFFFFF;
			border-radius: 50px;
		}
		.icon{
			width: 30rpx;
			height: 30rpx;
			margin: 0 30rpx;
		}
		.flex-column{
			display: flex;
			flex-direction: column;
		}
		.upload-button-display-site{
			margin-left:20rpx;
			margin-top:30rpx;
		}
	}

	.item-title {
		margin-left:30rpx;
		line-height: 28rpx;
		color: #666;
		font-size: 28rpx;
		display: block;
	}
	.site-display{
		width: 100%;
		color: rgb(192, 196, 204);
		height: 70rpx;
		line-height: 70rpx;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.item-desc {
		margin-left:30rpx;
		line-height: 44rpx;
		color: #b2b2b2;
		font-size: 22rpx;
		display: block;
		margin-top: 8rpx;
	}
</style>
